<template>
  <div class="tab-bar">
    <van-tabbar v-model="currentIndex" @change="onChange" active-color="#f4ea2a" route>
        <template v-for="(item, index) in tabbarData" :key="index">
        <van-tabbar-item :to="item.path">
            <span>{{item.text}}</span>
            <template #icon>
                <img
                    :src="
                        currentIndex === index
                        ? getAssetURL(item.imageActive)
                        : getAssetURL(item.image)
                    "
                    alt=""
                    /> 
            </template>
        </van-tabbar-item>
        </template>
    </van-tabbar>
  </div>
</template>
<script setup>
import { ref,watch } from "vue";
import {useRoute} from "vue-router"
import { getAssetURL } from "@/utils/load_assets";
const tabbarData = [
  {
    text: "首页",
    image: "/tabbar/首页.png",
    imageActive: "/tabbar/首页选中.png",
    path: "/home",
  },
  {
    text: "收藏",
    image: "/tabbar/收藏.png",
    imageActive: "/tabbar/收藏选中.png",
    path: "/favor",
  },
  {
    text: "订单",
    image: "/tabbar/订单.png",
    imageActive: "/tabbar/订单选中.png",
    path: "/order",
  },
  {
    text: "消息",
    image: "/tabbar/消息.png",
    imageActive: "/tabbar/消息选中.png",
    path: "/message",
  },
];
const currentIndex = ref(0);
const onChange = (active)=>{
  console.log(active,"dsad");
}
const route = useRoute()
watch(route,(newRoute)=>{
 const  index = tabbarData.findIndex(item=> item.path === newRoute.path)
 if(index === -1) return
 currentIndex.value = index
})

</script>
<style lang="less" scoped>
/*局部css 支持css3 可以改变elementUI组件的样式 且组件样式调整只在本页面生效**/
/*主样式*/


/* 修改第三方UI组件库的样式
1.用插槽,插入自己的元素那么在自己的作用域中直接修改这个元素
2.全局定义一个变量,覆盖它默认变量的值缺点: 全局修改
3.布局定义一个变量,覆盖它默认变量的值优点: 布局修改
4.直接查找对应的子组件选择器,进行修改
:deep(子组件中元素的选择器) */
.tab-bar {
    // 局部定义一个变量: 只针对tab-bar子元素
    // --van-tabbar-item-font-size: 14px;
    img{
        height: 22px;
    }
    // 找到类,对垒中的css属性进行重写
    // :deep(.van-tabbar-item__icon){
    //     font-size: 30px;
    // }
}
</style>
